<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>${session.id}测试红包</title>
    <script type="text/javascript" src="${rc.contextPath}/static/js/jquery.min.js"></script>
    <style>
        *{margin:0;padding:0;font-size: 12px;}
        .input{
            border: 0;
            background: #fff;
            height: 30px;
            width: 80%;
            margin-left: 2%;
            outline: none;
            padding:5px;
            margin-top:5px;
            border-radius: 3px;
        }
        .operate{
            background: #efefef;
            height: 50px;
            border-top:1px solid #ddd;
            position: fixed;
            bottom: 0;
        }
        .dialog{
            margin:0 auto;
            height: 300px;
        }
        .add{
            display: inline-block;
            width: 10%;
            margin-left:2.5%;
            vertical-align: middle;
        }
        #sendPecket dl{
            width:90%;
            height:40px;
            line-height: 40px;
            background: #fff;
            border-radius: 5px;
            margin:20px auto;
            padding:10px;
            font-size: 16px;
        }
        #sendPecket dl input{
            border:0;
            outline: 0;
            width:50px;
            height:20px;
        }
        button{
            border:0;
            outline: 0;
            width:200px;
            height:60px;
            background: #ff4b52;
            color: #fff;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
            font-size: 16px;
        }
        .right{
            font-size: 16px;
            float: right;
        }
        .redPacket{
            width:200px;
            height:80px;
            background: #ff560f;
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            line-height: 80px;
            text-align: right;
            padding: 10px;
            border-radius: 10px;
            margin:10px auto;
        }
        #openPacket{
            background: rgba(255,255,255,.5);
            width:100%;
            height: 1000px;
            position: fixed;
            top: 0;
            display: none;
        }
        #packet{
            width:250px;
            height:400px;
            background: #ff552f;
            border: 1px solid #ff8814;
            border-radius: 10px;
            margin:0px auto;
            margin-top:50px;
            position: relative;
        }
        #openBtn{
            width:50px;
            height: 50px;
            background: #f5ad67;
            border-radius: 50%;
            position: absolute;
            left: 100px;
            bottom: 50px;
            font-size: 18px;
            font-weight: 700;
            line-height: 50px;
            text-align: center;
        }
        #closeBtn{
            color:#f5ad67;
            font-size: 20px;
            width: 30px;
            height: 30px;
            border:2px solid #f5ad67;
            border-radius: 50%;
            margin:20px auto;
            line-height: 30px;
            text-align: center;
        }
        #packetList{
            display: none;
            width:100%;
            height:800px;
            background: #ddd;
            margin:0px auto;
            position: fixed;
            top: 0;
        }
        .user-list{
            width:100%;
            height:60px;
            background: #fff;
        }
        .user-list img{
            width: 40px;
            height: 40px;
            border-radius: 5px;
            margin:10px;
        }
        .user-list div{
            height: 59px;
            display: inline-block;
            line-height: 30px;
            width: 80%;
            border-bottom: 0.5px solid #eee;
        }

    </style>
</head>
<body style="background: #ececec;">
<div class="dialog">
    
</div>
<div class="operate">
    <input class="input"> <span class="add">
    <svg onclick="obj.showSubOp()" class="icon" style="width: 100%;height: 100%;line-height: 50px;text-align: center;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m0 810.666666c-204.8 0-373.333333-168.533333-373.333333-373.333333S307.2 138.666667 512 138.666667 885.333333 307.2 885.333333 512 716.8 885.333333 512 885.333333zM682.666667 480h-138.666667V341.333333c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v138.666667H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h138.666667V682.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-138.666667H682.666667c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" /></svg></span>
</div>
<div id="subOp" style="background: #efefef;width:100%;display: none;border-top:1px solid #ddd;position: fixed;bottom: 0;">
        <span onclick="obj.packetDialog()" style="margin:10px;padding:10px;width:30px ;height:40px;background: #fff;display: inline-block;border-radius: 5px;text-align: center;">
            <svg class="icon" style="width:100%;height:70%;"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M380.48 563.925333C398.901333 508.949333 450.826667 469.333333 512 469.333333s113.098667 39.616 131.52 94.592A709.162667 709.162667 0 0 0 821.333333 505.781333V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256a53.333333 53.333333 0 0 0-53.333333 53.333334v303.114666a709.152 709.152 0 0 0 177.813333 58.144z m268.768 64.010667C639.573333 695.072 581.813333 746.666667 512 746.666667c-69.813333 0-127.573333-51.594667-137.248-118.72A773.109333 773.109333 0 0 1 202.666667 576.117333V821.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V576.128a773.12 773.12 0 0 1-172.085333 51.808zM256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m256 597.333334a74.666667 74.666667 0 1 0 0-149.333334 74.666667 74.666667 0 0 0 0 149.333334z" /></svg>
            <br>红包
        </span>
</div>

<div id="sendPecket" style="width: 100%;height:800px;display: none;position: fixed;top:0;background: #ececec;">
    <dl>
        红包个数 <span class="right"><input id="num" type="number" placeholder="填写个数">个</span>
    </dl>

    <dl>
        总金额 <span class="right"><input id="amount" type="number" placeholder="0.00">元</span>
    </dl>



    <dl>
        备注 <input id="remark" type="text" placeholder="恭喜发财，大吉大利">
    </dl>

    <button onclick="obj.send()">塞钱进红包</button>
</div>


<div id="openPacket">

    <div id="packet">
        <span id="fromUser" style="color: #f5ad67;display: block;width: 80%;text-align: center;line-height: 40px;margin: 0px auto;margin-top:50px;font-weight: 700;"></span>
        <div style="color: #f5ad67;width: 80%;text-align: center;line-height: 40px;margin: 50px auto;font-size: 20px;">恭喜发财，大吉大利</div>
        <div id="openBtn" >開</div>
    </div>
    <div id="closeBtn" onclick="$('#openPacket').hide()">X</div>

</div>


<div id="packetList">
    <div style="background: #fff;">
        <div style="background: #ff3128;border-radius: 0 0 500px 500px;width: 100%;height: 150px;margin-top: -100px;">
            <div style="width: 50px;height: 20px;margin-left: 42%;position: absolute;top: 2px;background: #fff;line-height: 20px;text-align: center;border-radius: 2px;"
                 onclick="$('#packetList').hide()">返回</div>
        </div>
    </div>
    <div style="background: #fff;line-height: 50px;" align="center">
        <img width="20" height="20" style="border-radius: 2px;vertical-align: middle;" src="${rc.contextPath}/static/image/screen.jpg">
        <span id="listUserId" style="font-size: 16px;font-weight: 700;font-family: 'Microsoft YaHei';vertical-align: middle;">xxxx的红包</span><br>
        <span id="listRemark" style="color: #ddd;">恭喜发财大吉大利</span><br>
        <span id="listAmount" style="color: #f5ad67;font-size: 28px; ">2.11</span><span style="color: #f5ad67;font-size: 12px;">元</span>
    </div>
    <div id="userListDiv" style="margin-top:20px;">

    </div>
</div>

<script>
    $(function (){
        var websocket;
        if('WebSocket' in window) {
            console.log("此浏览器支持websocket");
            websocket = new WebSocket("ws://192.168.3.118:8082/websocket/${session.id}");
        } else if('MozWebSocket' in window) {
            alert("此浏览器只支持MozWebSocket");
        } else {
            alert("此浏览器只支持SockJS");
        }
        websocket.onopen = function(evnt) {
            console.log("链接服务器成功!")
        };
        websocket.onmessage = function(evnt) {
            console.log(evnt.data);
            var json = eval('('+evnt.data+ ')');
            obj.addPacket(json.id,json.packetNo,json.userId)

        };
        websocket.onerror = function(evnt) {};
        websocket.onclose = function(evnt) {
            console.log("与服务器断开了链接!")
        }
    });


    var obj = (function(){

        return {
            showSubOp:function (){
                var operate = document.getElementsByClassName("operate")[0];
                if(!$("#subOp").is(':hidden')){
                    $("#subOp").slideUp().hide()
                    operate.style.bottom = "0px";
                }else{
                    $("#subOp").show().slideDown()
                    operate.style.bottom = "81px";
                }
            },
            packetDialog:function (){
                $("#sendPecket").show();
            },
            send:function send(){
                let that = this;
                $.ajax({
                    url:'${rc.contextPath}/redpackets/send',
                    data:JSON.stringify({reqTime:111,sign:'111',data:{amount:$("#amount").val(),num:$("#num").val(),remark:$("#remark").val(),userId:'${session.id}'}}),
                    dataType:'json',
                    contentType: 'application/json',
                    type:'post'
                }).success(function(data){
                    if(data.respCode === "0000"){
                        var packetNo = data.data.packetNo;
                        var packetId = data.data.packetId;
                        var paySeq = data.data.paySeq;
                        that.payCallback(packetId,packetNo,paySeq)
                    }else{
                        alert(data.respMsg)
                    }
                }).error(function(){

                })
            },
            payCallback:function (packetId,packetNo,paySeq) {
                let that = this;
                $.ajax({
                    url:'${rc.contextPath}/redpackets/payCallback',
                    data:JSON.stringify({reqTime:111,sign:'111',data:{packetNo:packetNo,paySeq:paySeq,payStatus:2}}),
                    dataType:'json',
                    contentType: 'application/json',
                    type:'post'
                }).success(function(data){
                    if(data.respCode === "0000"){
                        that.addPacket(packetId,packetNo,'${session.id}');
                        $("#sendPecket").hide();
                    }else{
                        alert(data.respMsg)
                    }
                }).error(function(){

                })
            },
            addPacket:function (packetId, packetNo,userId) {
                $(".dialog").append("<div class='redPacket' onclick='obj.receive("+packetId+",\""+packetNo+"\",\""+userId+"\")'><svg style='vertical-align: middle;' t=\"1637305840154\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4181\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"50\" height=\"50\"><defs><style type=\"text/css\"></style></defs><path d=\"M183.912765 45.978191h650.262989v932.700449H183.912765z\" fill=\"#E83828\" p-id=\"4182\"></path><path d=\"M186.54009 45.978191h651.576652L512.328416 534.003849z\" fill=\"#C30D23\" p-id=\"4183\"></path><path d=\"M512.328416 507.730597m-191.137909 0a191.137909 191.137909 0 1 0 382.275818 0 191.137909 191.137909 0 1 0-382.275818 0Z\" fill=\"#EBC14C\" p-id=\"4184\"></path><path d=\"M595.745991 535.974343H527.435536v-36.125722h68.310455c8.538807 0 15.10712-6.568313 15.10712-15.10712 0-8.538807-6.568313-15.10712-15.10712-15.10712h-44.664529l24.95959-24.959589c5.911482-5.911482 5.911482-15.10712 0-21.018602-5.911482-5.911482-15.10712-5.911482-21.018602 0L512.328416 466.350225l-42.037204-42.037204c-5.911482-5.911482-15.10712-5.911482-21.018601 0-5.911482 5.911482-5.911482 15.10712 0 21.018602l24.959589 24.959589h-44.664528c-8.538807 0-15.10712 6.568313-15.10712 15.10712 0 8.538807 6.568313 15.10712 15.10712 15.10712h68.310455v36.125722H429.567672c-8.538807 0-15.10712 6.568313-15.10712 15.10712 0 8.538807 6.568313 15.10712 15.10712 15.10712h68.310455v49.919179c0 7.225144 5.911482 13.136626 13.136626 13.136626h3.284157c7.225144 0 13.136626-5.911482 13.136626-13.136626v-49.919179h68.310455c8.538807 0 15.10712-6.568313 15.10712-15.10712 0-9.195638-7.225144-15.763951-15.10712-15.763951z\" fill=\"#E29C4E\" p-id=\"4185\"></path></svg>恭喜发财，大吉大利</div>");
            },
            receive:function (packetId,packetNo,userId){
                let that = this;
                $.ajax({
                    url:'${rc.contextPath}/redpackets/receive',
                    data:JSON.stringify({reqTime:111,sign:'111',data:{packetId:packetId,packetNo:packetNo,userId:"${session.id}"}}),
                    dataType:'json',
                    contentType: 'application/json',
                    type:'post'
                }).success(function(data){
                    if(data.respCode === "0000"){
                        $("#openPacket").show();
                        $('#fromUser').html(userId.substring(0,10)+"的红包");
                        $("#openBtn").show().on('click',function(){
                            that.open(packetId,packetNo,userId)
                        })
                    }else{
                        that.receiveList(userId,packetNo,"0.00")
                    }
                }).error(function(){
                })
            },
            open:function (packetId,packetNo,userId){
                let that = this;
                $.ajax({
                    url:'${rc.contextPath}/redpackets/open',
                    data:JSON.stringify({reqTime:111,sign:'111',data:{packetId:packetId,packetNo:packetNo,userId:"${session.id}"}}),
                    dataType:'json',
                    contentType: 'application/json',
                    type:'post'
                }).success(function(data){
                    $("#openPacket").hide();
                    if(data.respCode === "0000"){
                        //alert(data.respMsg)
                        that.receiveList(userId,packetNo,data.respMsg)
                    }else{alert(data.respMsg)}
                }).error(function(){

                })
            },
            receiveList:function (userId,packetNo,amount){
            $('#packetList').show();
            $('#listUserId').text(userId.substring(0,10) + "的红包");
            $('#listAmount').text(amount);
            $.ajax({
                url:'${rc.contextPath}/redpackets/receiveList',
                data:JSON.stringify({reqTime:111,sign:'111',data:{packetNo:packetNo}}),
                dataType:'json',
                contentType: 'application/json',
                type:'post'
            }).success(function(data){
                if(data.respCode === "0000"){
                    var list = data.data.list;
                    $('#userListDiv').html("");
                    for (var i = 0; i < list.length; i++) {
                        var html = "<dl class=\"user-list\">\n" +
                            "            <img src=\"${rc.contextPath}/static/image/screen.jpg\" >\n" +
                            "            <div >\n" +
                            "                <span style=\"float: left;font-size: 14px;font-weight: 700;\"> "+list[i].userId.substring(0,10)+"\n" +
                            "                <br>\n" +
                            "                <span style=\"color: #999;font-size: 12px;\">"+list[i].receiveTime+"</span>\n" +
                            "                </span>\n" +
                            "                <span style=\"float: right;font-size: 12px;font-weight: 700;\">"+list[i].amount+"元</span>\n" +
                            "            </div>\n" +
                            "        </dl>"
                        $('#userListDiv').append($(html))
                        if("${session.id}" === list[i].userId){
                            $('#listAmount').text(list[i].amount);
                        }
                    }
                }
            }).error(function(){

            })
        }


        }
    })()

</script>
</body>
</html>